<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        display:
            block
            inline
            inline-block
            flex
            table系列
        */
        a {
            display: block;
        }

        span {
            display: inline-block;
        }

        .box,
        span {
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
        }

        /* 弹性布局:控制元素的子元素 */
        ul {
            display: flex;
        }

        /* ul li {
            display: inline;
        } */

        .box2 p {
            display: none;
        }

        .box2:hover p {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 块级元素div  行内元素[不能设置宽高]a 
        ·          行内块:img,input,select,button,label,textarea
    -->

    <a href="#">首页</a>
    <a href="#">列表页</a>
    <a href="#">详情页</a>

    <div class="box">
        内容
    </div>
    <span>行内span</span>
    <span>行内span</span>
    <span>行内span</span>

    <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>


    <div class="box2">
        内容
        <p>关于内容的细节</p>
    </div>

    <div style="display: table-caption;">
        asdasdasd
    </div>
</body>

</html>